<!DOCTYPE html>
<html ng-app="app">

	<head>
		<meta charset="utf-8">
		<title>我的背包</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="__STATIC__/index/css/mui.min.css">
		<link rel="stylesheet" href="__STATIC__/index/css/commen.css" />
		<style type="text/css">
			.mui-media-body {
				font-size: 14px;
			}
			
			.mui-bar-nav {
				background-color: #2c313b !important;
			}
			
			.mui-table-view {
				border-top: none !important;
			}
			
			.mui-media-body .bigFont {
				font-size: 22px;
				color: #FFFFFF;
				padding: 10px 5px;
				padding-left: 0;
			}
			
			.mui-table-view-cell {
				height: 105px;
				padding: 0px 15px 43px !important;
				margin-bottom: 20px;
			}
			
			.jykA,
			.gameCard_hj,
			.gameCard_hd,
			.gameCard_fh {
				background-size: 100%;
				margin: 0 !important;
				position: relative;
				border-bottom-right-radius: 8px;
				border-bottom-left-radius: 8px;
			}
			
			.gameCard_hj,
			.gameCard_hd,
			.gameCard_fh {
				border-top-left-radius: 8px;
				border-top-right-radius: 8px;
			}
			
			.gameCard_hj {
				background: -webkit-linear-gradient(#DA574C, #DA0246);
				/* Safari 5.1 - 6.0 */
				background: -o-linear-gradient(#DA574C, #DA0246);
				/* Opera 11.1 - 12.0 */
				background: -moz-linear-gradient(#DA574C, #DA0246);
				/* Firefox 3.6 - 15 */
				background: linear-gradient(#DA574C, #DA0246);
				/* 标准的语法 */
			}
			
			.gameCard_hd {
				background: -webkit-linear-gradient(#8FA0F9, #5454CA);
				/* Safari 5.1 - 6.0 */
				background: -o-linear-gradient(#8FA0F9, #5454CA);
				/* Opera 11.1 - 12.0 */
				background: -moz-linear-gradient(#8FA0F9, #5454CA);
				/* Firefox 3.6 - 15 */
				background: linear-gradient(#8FA0F9, #5454CA);
				/* 标准的语法 */
			}
			
			.gameCard_fh {
				background: -webkit-linear-gradient(#9272EE, #273BA1);
				/* Safari 5.1 - 6.0 */
				background: -o-linear-gradient(#9272EE, #273BA1);
				/* Opera 11.1 - 12.0 */
				background: -moz-linear-gradient(#9272EE, #273BA1);
				/* Firefox 3.6 - 15 */
				background: linear-gradient(#9272EE, #273BA1);
				/* 标准的语法 */
			}
			
			.jykA {
				background-image: url(__STATIC__/index/img/my/greenBg.png);
			}
			
			.cardLogo {
				display: inline-block;
				width: 55px !important;
				height: 54px !important;
				margin-top: 5px;
				max-width: 55px !important;
			}
			
			.hjLogo {
				height: 59px !important;
				max-width: none !important;
			}
			
			.hdLogo {
				max-width: none !important;
				width: 49px !important;
				height: 57px !important;
			}
			.fhLogo{
				max-width: none !important;
				width: 57px !important;
				height: 74px !important;
				margin-top: -5px;
			}
			.cardStates {
				position: absolute;
				top: 5px;
				left: 0;
				right: 0;
				text-align: right;
				font-size: 12px;
				padding-right: 11px;
			}
			
			@media only screen and (min-device-width:320px) and (max-device-width:359px) {
				.jykA,
				.gameCard_hj,
				.gameCard_hd,
				.gameCard_fh {
					padding: 7px 15px !important;
				}
				.mui-table-view-cell {
					margin-bottom: 0;
				}
			}
			
			@media only screen and (min-device-width:360px) and (max-device-width:374px) {
				.jykA,
				.gameCard_hj,
				.gameCard_hd,
				.gameCard_fh {
					padding: 15px 15px !important;
				}
			}
			
			@media only screen and (min-device-width:375px) and (max-device-width:411px) {
				.jykA,
				.gameCard_hj,
				.gameCard_hd,
				.gameCard_fh {
					padding: 17px 15px !important;
				}
			}
			
			@media only screen and (min-device-width:412px) and (max-device-width:414px) {
				.jykA,
				.gameCard_hj,
				.gameCard_hd,
				.gameCard_fh {
					padding: 21px 15px !important;
				}
			}
			/*暂无数据*/
			
			.noNewBox {
				text-align: center;
				position: absolute;
				top: 86px;
				left: 50%;
				margin-left: -69px;
			}
			
			.zwxxImg {
				width: 138px;
				height: 128px;
			}
			
			.zwsj {
				margin-top: 12px;
				text-align: center;
				color: #677091;
			}
			/*table*/
			
			.tab_nav {
				position: fixed;
				top: 44px;
				z-index: 10;
				width: 100%;
				padding: 0 10px;
				background: #2c313b;
				border-top: 1px solid #23262E;
			}
			
			.mui-bar-nav~.mui-content {
				padding-top: 88px !important;
			}
			
			.mui-segmented-control {
				border: none;
			}
			
			.mui-segmented-control .mui-control-item {
				border-left: none;
				color: #fff;
				font-size: 15px;
			}
			
			.mui-segmented-control .mui-control-item.mui-active {
				background-color: #2c313b;
				color: #F7561E;
				border-bottom: 2px solid #F7561E;
			}
			/*弹窗*/
			
			.mui-popup-button:first-child {
				color: #333 !important;
				border-radius: 0 0 0 5px !important;
			}
			
			.mui-popup-button:last-child {
				border-radius: 0 0 5px !important;
				background: #F7561E;
				color: #FFF !important;
			}
			
			.mui-popup-inner {
				border-radius: 5px 5px 0 0 !important;
			}
			
			.mui-popup {
				border-radius: 0 !important;
			}
			
			.mui-popup-title+.mui-popup-text {
				font-size: 16px !important;
			}
		</style>
	</head>

	<body ng-controller="myBackpack_controller">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav mui-pull-left" onclick="javascript :history.back(-1);"></a>
			<h4 class="mui-title">我的背包</h4>
		</header>
		<!--table-->
		<div class="tab_nav">
			<div class="mui-segmented-control">
				<a class="mui-control-item mui-active" href="#item1">游戏道具</a>
				<a class="mui-control-item" href="#item2">成长道具</a>
			</div>
		</div>
		<div id="myBackpack" class="mui-content">
			<!--游戏道具-->
			<div id="item1" class="mui-control-content mui-active">
				<ul class="mui-table-view">
					<!--暂无数据-->
					{empty name="data"}
					<div class="noNewBox">
						<img src="/static/index/img/home/zwxx.png" class="zwxxImg">
						<p style="text-align: center;">暂无数据</p>
					</div>
					{else /} {volist name="data" id="vo" } {switch name='$vo.pid'} {case value="4"}
					<!--飞行器卡片-->
					{if condition="$vo.flynum neq 0" }
					<li class="mui-table-view-cell mui-media mui-disabled">
						<a href="javascript:;" class="gameCard_comm gameCard_hj" style="cursor: pointer;">
							<img class="mui-media-object mui-pull-left hjLogo" src="__STATIC__/index/img/gift/hj.png">
							<span class="cardStates" style="font-weight: bold;">数量:{$vo.flynum}</span>
							<div class="mui-media-body">
								一链到底&nbsp;&nbsp;飞行器
								<p class='mui-ellipsis bigFont'>无视障碍飞行三秒</p>
							</div>
						</a>
					</li>
					{/if} {/case} {case value="5" }
					<!--护盾卡片-->
					{if condition="$vo.carenum neq 0" }
					<li class="mui-table-view-cell mui-media mui-disabled">
						<a href="javascript:;" class="gameCard_comm gameCard_hd" style="cursor: pointer;">
							<img class="mui-media-object mui-pull-left hdLogo" src="__STATIC__/index/img/gift/hd.png">
							<span class="cardStates" style="font-weight: bold;">数量:{$vo.carenum}</span>
							<div class="mui-media-body">
								一链到底&nbsp;&nbsp;护盾
								<p class='mui-ellipsis bigFont'>可抵挡一次伤害</p>
							</div>
						</a>
					</li>
					{/if} {/case} {case value="6" }
					<!--护盾卡片-->
					{if condition="$vo.relivenum neq 0" }
					<li class="mui-table-view-cell mui-media mui-disabled">
						<a href="javascript:;" class="gameCard_comm gameCard_fh" style="cursor: pointer;">
							<img class="mui-media-object mui-pull-left fhLogo" src="__STATIC__/index/img/gift/fh.png">
							<span class="cardStates" style="font-weight: bold;">数量:{$vo.relivenum}</span>
							<div class="mui-media-body">
								一链到底&nbsp;&nbsp;复活卡
								<p class='mui-ellipsis bigFont'>使用后立即满血复活</p>
							</div>
						</a>
					</li>
					{/if} {/case} {/switch} {/volist} {/empty}
				</ul>
			</div>
			<!--成长道具列表-->
			<div id="item2" class="mui-control-content">
				<ul class="mui-table-view">
					{empty name="arr"}
					<div class="noNewBox">
						<img src="/static/index/img/home/zwxx.png" class="zwxxImg">
						<p class="zwsj" style="text-align: center;">暂无数据</p>
					</div>
					{else /} {volist name="arr" id="vo" } {switch name='$vo.type'} {case value="1"} {if condition="$vo.status eq 0" }
					<li class="mui-table-view-cell mui-media mui-disabled">
						<a href="{:url('user/card_green')}?id={$vo.id}" class="jykA" style="cursor: pointer;">
							<img class="mui-media-object mui-pull-left cardLogo" src="__STATIC__/index/img/my/jyk.png">
							<span class="cardStates" style="font-weight: bold;">未使用</span>
							<div class="mui-media-body">
								经验卡
								<p class='mui-ellipsis bigFont'>{$vo.name}</p>
							</div>
						</a>
					</li>
					{elseif condition="$vo.status eq 1" /}
					<li class="mui-table-view-cell mui-media mui-disabled">
						<a href="javascript:;" class="jykA">
							<img class="mui-media-object mui-pull-left cardLogo" src="__STATIC__/index/img/my/jyk.png">
							<span class="cardStates" style="font-weight: bold;">使用中</span>
							<div class="mui-media-body">
								经验卡
								<p class='mui-ellipsis bigFont'>{$vo.name}</p>
							</div>
						</a>
					</li>
					{/if} {/case} {case value="2" } {if condition="$vo.status eq 0" }
					<li class="mui-table-view-cell mui-media mui-disabled">
						<a href="{:url('user/card_red')}" class="dhlpA">
							<img class="mui-media-object mui-pull-left cardLogo" src="__STATIC__/index/img/my/yk.png">
							<span class="cardStates">未使用</span>
							<div class="mui-media-body">
								礼品兑换卡
								<p class='mui-ellipsis bigFont'>无限制兑换礼品道具卡</p>
							</div>
						</a>
					</li>
					{/if} {/case} {/switch} {/volist} {/empty}
				</ul>
			</div>
		</div>
		<script src="__STATIC__/index/js/mui.min.js"></script>
		<script src="__STATIC__/index/js/jquery.min.js"></script>
		<script type="text/javascript">
			$('.gameCard_comm').click(function() {
				var btnArray = ['取消', '进入游戏'];
				mui.confirm('是否立刻进入游戏？', ' ', btnArray, function(e) {
					if(e.index == 1) {
						location.href = "http://game.koko360.com/game/ChangWanGame/index.html";
					} else {
						return false;
					}

				});
			})
		</script>
	</body>

</html>